[dev-v5] FluentTreeView

A hierarchical list structure component for displaying data in a collapsible and expandable way.

You can create a Tree manually by nesting FluentTreeItem components or by using the Items property of FluentTreeView to dynamically generate a tree from a list of objects.
If you use the Items property, you can also set the ItemTemplate property to specify how each item should be displayed.
With these two ways of creating a tree, using the Text parameter will display the text of the element, adding an ellipsis ... if the text is too long.
Each element also has the properties IconStart, IconEnd, and IconAside to display an icon to the left, right, or at the end of the text.

Manual TreeView

<FluentTreeView @bind-SelectedId="@SelectedId">
    <FluentTreeItem Text="Flowers" IconStart="@(new Icons.Regular.Size16.LeafOne())">
        <FluentTreeItem Text="Daisy" />
        <FluentTreeItem Text="Sunflower" />
        <FluentTreeItem Text="Rose" />
    </FluentTreeItem>
</FluentTreeView>

Items parameter

In this example, we create a tree dynamically by using the Items property of FluentTreeView.
The Items parameter is a list of TreeViewItem that represent the items in the tree.

When a user selects an item, the SelectedItem parameter is updated with the ITreeViewItem of the selected item.

<FluentTreeView Items="@Items" @bind-SelectedItem="@SelectedItem">
    <ItemTemplate>
        <FluentBadge Color="BadgeColor.Informative" Content="@context.Id" />
        @context.Text
    </ItemTemplate>
</FluentTreeView>

Mutliple Selection

The FluentTreeView component supports the multiple selection of items using the SelectionMode parameter.
When this parameter is set to TreeSelectionMode.Multiple, a checkbox is displayed next to each item.

You can customize the visibility of the checkbox using the MultipleSelectionVisibility parameter.
This function allows you to show, hide (keeping the space) or hide and remove the checkbox, based on each ITreeViewItem objects.

<FluentTreeView Items="@Items"
                HideSelection="true"
                SelectionMode="TreeSelectionMode.Multiple"
                @bind-SelectedItems="@SelectedItems">
</FluentTreeView>

Live example: https://fluentui-blazor-v5.azurewebsites.net/TreeView

Unit Tests